<!-- home -->
<template>
  <div class="about-container">
    <div class="warpper">
      <div class="header-box">
        <div class="loginout" @click="handleLoginOut">退出登录</div>
        <div class="img-box">
          <img :src="userInfo.avatar" v-if="userInfo.avatar">
          <img src="../../../static/images/default.jpg" v-else>
        </div>
        <div class="info-box">
          <div class="name">{{userInfo.username}}</div>
          <div class="id">ID：{{userInfo.id}}</div>
          <div class="id">{{userInfo.desc}}</div>
          <div class="tag">
            <van-tag color="#ff9235">{{userInfo.age}}岁</van-tag>
          </div>
        </div>
      </div>
      <van-grid clickable :column-num="2">
        <van-grid-item icon="star-o" text="我的收藏" to="/collect" />
        <van-grid-item icon="like-o" text="我的点赞" to="/like" />
      </van-grid>
      <div class="main-box">
        <div class="com-title o"><span>我的订单</span></div>
        <van-list
          v-model="listBuy.loading"
          :finished="listBuy.finished"
          finished-text="没有更多了"
          @load="getOrderList"
        >
          <!--<div class="item-video-box" @click="goDetailsCourse(item)" v-for="item,index in listBuy.list" :key="index">
            <div class="img-box">
              <img :src="item.course.coverUrl">
            </div>
            <div class="info-box">
              <div class="title">{{item.course.name}}</div>
              <div class="info">{{item.course.desc}}</div>
              <div class="edit-box">下单时间：{{item.createdAt}}</div>
            </div>
          </div>-->
          <van-card
                  @click="goDetailsCourse(item)" v-for="(item, index) in listBuy.list" :key="index"
                  :price="item.course.price"
                  tag="已购买"
                  :desc="item.course.desc"
                  :title="item.course.name"
                  :thumb="item.course.url"
                  style="background-color: white;box-shadow: 0 0 0px gray;margin: 8px;border-radius: 5px;"
          >
            <template #tags>
              <van-tag plain>{{item.course.category.name}}</van-tag>
            </template>
            <template #footer>
              <span plain>{{item.createdAt}}</span>
            </template>
          </van-card>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
// 请求接口
import { getUserInfo,getLikeList,getSaveList,getLikeCourse,getSaveCourse } from '@/api/user.js'
import { logout } from '@/api/common.js'
import { orderList } from '@/api/order.js'
import { removeToken,removeUserId } from '@/utils/auth'
import dayjs from 'dayjs'

export default {
  data() {
    return {
      listBuy:{
        loading: false,
        finished: false,
        listQuery:{
          pageSize:10,
          pageNum:0,
        },
        list:[]
      },
      userInfo: {},
      active:'0',
    }
  },
  mounted() {
    this.getUserInfo()
  },
  created() {
    // this.userId = this.$store.getters.userId
  },
  methods: {
    goDetailsCourse(item){
      this.$router.push({
        path:'/videoDetails?courseId='+item.course.id
      })
    },
    async handleLoginOut(){
      await logout({}).then(res => {
        if (res.code == 200) {
          removeToken()
          removeUserId()
          this.$store.dispatch('setToken', '')
          this.$store.dispatch('setUserId', '')
          this.$notify({ type: 'success', message: res.message })
          this.$router.push({
            path:'/login'
          })
        } else {
          this.$notify(res.message)
        }
      })
    },
    async getUserInfo(){
      await getUserInfo({
          id: this.$store.getters.userId}
        ).then(res => {
        if (res.code == 200) {
          this.userInfo = res.data
        } else {
          this.$notify(res.message)
        }
      })
    },
    async getOrderList(){
      this.listBuy.listQuery.pageNum ++
      await orderList({...this.listBuy.listQuery,userId: Number(this.$store.getters.userId)}).then(res => {
        if (res.code == 200) {
          res.data.rows.map(item => {
            item.createdAt = dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')
          })
          this.listBuy.list = this.listBuy.list.concat(res.data.rows)
          this.listBuy.loading= false
           if(res.data.count > this.listBuy.list.length){
            this.listBuy.finished = false
          }else{
            this.listBuy.finished = true
          }
        } else {
          this.$notify(res.message)
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.com-title{
  font-size: .4167rem;
  color: #333;
  position: relative;
  font-weight: bold;
  padding: 0.4rem 0;
  z-index: 2;
  box-sizing: border-box;
  &.o{
    margin:0 0.5rem;
  }
  span{
    position: relative;
    z-index: 2;
  }
  &::after{
    content: "";
    height: .2rem;
    width: 1.6889rem;
    background: #ff9235;
    border-radius: .1389rem;
    position: absolute;
    left: 0;
    bottom: .4rem;
    opacity: 1;
    z-index: 1;
  }
}
.item-video-box{
    background: #fff;
    border-radius: .2778rem;
    display: flex;
    align-items: center;
    padding:.2778rem;
    box-sizing: border-box;
    width: 94%;
    margin:.2778rem auto 0;
    &:first-child{
      margin-top: 0;
    }
    .img-box{
      flex: 0 0 3rem;
      position: relative;
      img{
        width:100%;
        height: 2.2rem;
        border-radius: .1389rem;
      }
      .van-tag{
        position: absolute;
        top: .1389rem;
        left: .1389rem;
      }
    }
    .info-box{
      flex:1;
      padding: .1389rem .1389rem .1389rem .2778rem;
      box-sizing: border-box;
      height: 2.2rem;
      position: relative;
      .title{
        width:5.5rem;
        font-size: .4167rem;
        color: #000;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .info{
        font-size: .3333rem;
        color: #999;
        margin-top: .1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .edit-box{
        position: absolute;
        left: .2778rem;
        bottom: .1rem;
        font-size: .3333rem;
        color: #999;
        width: 100%;
        .van-icon{
          min-width: 1.7rem;
          color: #666;
          display: inline-block;
          &::before{
            margin-right: .1389rem;
            font-size: .3333rem;
            font-weight: bold;
            color: #ff9235;
          }
        }
      }
    }
  }
.about-container {
  /* 你的命名空间 */
  box-sizing: border-box;
  .line{
    height: .0833rem;
    background: #f8f8f8;
  }
  .warpper {
    .main-box{
      padding-bottom: 1.3333rem;
      box-sizing: border-box;
      .cell-box{
        display: flex;
        align-items: center;
      }
      .custom-title{
        margin-left: .1389rem;
        width: 7.7rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        display: block;
      }
    }
    .header-box{
      background: #fff;
      display: flex;
      padding:.8333rem 0.4rem;
      box-sizing: border-box;
      align-items: center;
      background: url("../../../static/images/bg2.jpg") center center no-repeat;
      background-size:100% auto ;
      position: relative;
      .loginout{
        font-size: .1667rem;
        position: absolute;
        right: .2778rem;
        bottom:.2778rem;
      }
      img{
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 100%;
        background: #fff;
      }
      .info-box{
        flex: 1;
        padding-left: .3rem;
        box-sizing: border-box;
        .name{
          font-size: .5556rem;
        }
        .id{
          font-size: .3056rem;
          padding:.0556rem 0 .2778rem;
          color: #999;
        }
        .van-tag{
          margin-right: .1389rem;
        }
      }
    }
  }
}
</style>
